import {Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
import {Subscription} from "rxjs";
import {SeedInfiniteScroll} from "app/shared/components/infinite-scroll/seed-infinite-scroll/seed-infinite-scroll.component";
import {Router} from "@angular/router";
import {ToolsService} from "app/shared/service/tools/tools.service";
import { MatchService} from "app/pages/match/match.service";

@Component({
  selector: 'seed-match',
  templateUrl: './match.component.html',
  styleUrls: ['./match.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class MatchComponent implements OnInit, OnDestroy {
  public matchList: any;
  public matchListFor: any;
  public page = 1;
  public scrollContainer;
  public eventSwiper: any;
  public isFilter: boolean;
  public checkData = true;
  public statusPicture = [
    '../../assets/icon/match-before.png',
    '../../assets/icon/match-before.png',
    '../../assets/icon/match-before.png',
    '../../assets/icon/match-before.png',
    '../../assets/icon/match-applying.png',
    '../../assets/icon/match-full.png',
    '../../assets/icon/match-playing.png',
    '../../assets/icon/match-end.png',
    '../../assets/icon/match-end.png',
  ];
  subscription: Subscription = new Subscription();
  @ViewChild(SeedInfiniteScroll) infiniteScroll;

  constructor(public router: Router,
              public toolsService: ToolsService,
              public matchService: MatchService) {

  }

  routerCompetitionDetail(itemId: string, b?: number) {
    this.router.navigate([`/match/detail`, itemId]);
  }

  getMatchList() {
    this.subscription.add(
      this.matchService.getMatchs().subscribe(res => {
        this.dealData(res);
      })
    );
  }

  onScroll() {
    setTimeout(() => {
      if (this.isFilter === false) {
        this.subscription.add(
          this.matchService.getMatchs(this.page).subscribe(res => {
            this.dealScrollData(res);
          })
        );
      } else {
        this.matchService.filterParam.page = this.page;
        this.subscription.add(
          this.matchService.getFilterList(this.matchService.filterParam).subscribe(res => {
            this.dealScrollData(res);
          })
        );
      }
    }, 800);
  }

  dealLogic(res) {
    this.page++;
    if (res.data.hasNextPage === false) {
      this.infiniteScroll.enable(false);
    }
    this.matchListFor = res.data.list;
  }

  dealScrollData(res) {
    if (res.result === '0' && res.data.list.length !== 0) {
      this.dealLogic(res);
      this.infiniteScroll.complete();
      this.matchList = [...this.matchList, ...this.matchListFor];
    }
  }

  dealData(res) {
    if (res.result === '0') {
      this.dealLogic(res);
      this.toolsService.hideLoading();
      this.matchList = this.matchListFor;
      if (this.matchList.length === 0) {
        this.checkData = false;
      }
    }
  }

  /**
   * @description 前往视频详情
   * @author ouyqx-691
   * @date 2017/11/24
   * @param news 单个轮播对象
   */
  goToTarget(slide) {
    // 外链且存在外链url
    if (slide.linkType === 2 && slide.detailUrl) {
      window.open(slide.detailUrl);
    } else {
      this.router.navigate(['/match', slide.resId]);
    }
  }

  ngOnInit() {
    this.toolsService.showLoading();
    this.matchService.filterParam.page = 1;
    this.isFilter = this.matchService.isFilter;
    if (this.isFilter === false) {
      this.getMatchList();
      this.eventSwiper = this.matchService.getSwiperData;
      this.matchService.getSwiperPicture();
    } else {
      this.subscription.add(
        this.matchService.getFilterList(this.matchService.filterParam).subscribe(res => {
          this.dealData(res);
        })
      );
    }
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}
